<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Planner</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>
        body { margin:0; padding:0; font-size:12px; font-family:sans-serif; color:#eee;}

        a:link, a:visited { color:#eee; text-decoration:none; text-shadow:#333 1px 1px 1px; }
        a:hover, a:active { color:#FF9400; text-decoration:none; }
        button { font-size:11px; padding:2px; }



        .col1 { position:fixed;  min-width:200px; max-width:200px !important; height:100%; background-color:#043C6B; color:white; overflow:hidden; }
        .col1 h1 { margin:5px 0 6px 12px; padding:0; font-size:20px; font-weight:bold; text-shadow:#111 1px 1px 2px; }
        .col1 h2 { margin:20px 0 6px 12px; padding:0; font-size:12px; font-weight:bold; text-align:left; color:#0B5FA5; text-shadow:#333 1px 1px 1px;}
        .col1 ul { margin:0; padding:0; }
        .col1 ul :last-child { list-style:none; border-bottom: none; }
        .col1 ul li { list-style:none; padding: 3px 12px 3px 24px; border-bottom:#25547B dashed 1px; cursor:pointer;}
        .col1 .selected { background:#0B5FA5; }

        .col1 ul li a { display:block; width:100%; border-bottom: silver dashed 1px;  }
        .col1 .search { width:80%; margin-left:1em; border:silver solid 1px; border-radius: 5px; }

        .col1 .project-info { padding-left:2.5em; }

        .col1 .profile { margin-left: 12px; }
        .col1 .profile a { margin-right:5px; }
        .col1 .profile img { border:gray solid 1px; border-radius:5px; background-color:white; float:left; clear:both; margin-right:10px; width:32px; height:32px; }
        .col1 .profile-text { font-size:smaller; }
        
        .col2 { background: white url(images/shadow.png) repeat-y left; position:fixed; width:350px; top:0;bottom:0; left:200px; padding:10px;
                color:#333; }
        .col2 .plan-info { margin-bottom:5px; }

        .col2 ul { margin:0; padding:0; }
        .col2 li { margin:0; padding:5px; list-style:none; border-top:silver solid 1px; cursor:pointer;  }
        .col2 li:hover { background: #ddd; }
        .col2 .selected { background: #eee; }
        .col2 .plan-detail { margin:10px; }
        .col2 .case-name { margin-bottom:4px; }

        .test-cases { overflow-y:auto; }


        .col3 { background: #f0f0f0 url(images/shadow.png) repeat-y left; position:fixed; height:100%; left:580px; right:0; }
    </style>
    <script src="http://www.google.com/jsapi"></script>
    <script>
        google.load("jquery", "1");
        google.load("jqueryui", "1");
        google.setOnLoadCallback(bootstrap);

        function bootstrap()
        {
            var toggleSelected = function()
            {
                $(this).closest('li').siblings().removeClass('selected');
                $(this).closest('li').addClass('selected');
                return false;
            };

            for(var i = 2 ; i <= 10; i++)
            {
                $('.col2 ul li:first').clone().find('.case-name').text('Test Case ' + i).end()
                                              .find('.case-detail').text('About test case ' + i).end()
                                              .appendTo($('.col2 ul'));
            }
            $('.col2 ul li').click(toggleSelected);

            $('.test-plans li').click(toggleSelected);
        }

    </script>
</head>
<body>
<div class="col1">
    <h1><a href="#">Test Plan</a></h1>

    <h2>Project</h2>
    <div class="project-info">
        Easy Test Plan<br>Release: 1.0-SNAPSHOT
    </div>

    <h2>Select Plan</h2>
    <ul class="test-plans">
        <li><a href="#">plan 1</a></li>
        <li><a href="#">plan 2</a></li>
        <li><a href="#">plan 3</a></li>
        <li><a href="#">plan 4</a></li>
    </ul>

    <h2>Toolbox</h2>
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Options</a></li>
        <li><a href="#">Test Planner</a></li>
        <li><a href="#">Start Test</a></li>
    </ul>

    <h2>Search</h2>
    <input type="text" class="search">

    <h2>Profile</h2>
    <div class="profile">
        <img src="images/offline_user_64.png" alt="profile">
        <div class="profile-text">
            <b><a href="#">Shaoting Cai</a></b><br>
            Demo Agency <br>
            <a href="#">Sign out</a> 
            <a href="#">Options</a>
        </div>
    </div>

</div>

<div class="col2">
    <div class="plan-info">
        <div class="plan-detail">c rhoncus nisi rhoncus pulvinar massa penatibus integer, et purus pulvinar turpis ultrices tempor aliquam nascetur et nascetur? Ultrices enim vel, cum? Integer nisi vel nunc nunc pulvinar mattis sit porttitor aliquam, </div>
        <div class="plan-options">
            <button>New Test</button>
            <button>Run Test</button>
        </div>
    </div>
    <ul class="test-cases">
        <li>
            <div class="case-name">Test Case 1</div>
            <div class="case-detail">Massa! Et tortor eu, porta nec purus parturient natoque turpis porttitor! Porta magnis eu! Egestas ac sed facilisis in, in? Dignissim in ut turpis natoque. Natoque, sed in diam turpis purus? Sit! Nunc lorem cras elit elementum tincidunt a, augue amet mattis nec? Nec, natoque adipiscing facilisis? Eros purus lundium, turpis ut urna</div>
        </li>
    </ul>
</div>

<div class="col3">
    
</div>

</body>
</html>